<template>
  <div>
    <!-- 准备一个容器放置图形 -->
    <div class="box" ref="map"></div>
  </div>
</template>

<script setup lang="ts" name="Map">
// 1.引入echarts
import * as echarts from 'echarts'
// 2.引入中国地图的JSON数据
import chinaJSON from './china.json'
import { onMounted, ref } from 'vue'

// 3.获取图表的DOM元素
let map = ref()
// 4.注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  // 5.初始化echarts实例对象
  let myChart = echarts.init(map.value)
  // 6.设置配置项
  myChart.setOption({
    // 地图组件
    geo: {
      map: 'china', //注册的地图名称,中国地图
      show: true, //是否显示地理坐标系组件
      roam: true, //是否开启鼠标缩放和平移漫游
      zoom: 1.3, //缩放比例
      // 地图的位置的设置
      left: 120,
      top: 150,
      right: 100,
      bottom: -150,
      // 地图上文字的设置
      label: {
        show: true, // 显示
        color: 'white', // 文字颜色
        fontSize: '14px', // 文字大小
      },
      // 每一个多边形的样式
      itemStyle: {
        // areaColor: 'skyblue', // 地图区域的颜色
        // 图形颜色(支持渐变色)
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          // 渐变色
          colorStops: [
            {
              offset: 0,
              color: 'blue', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'aqua', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        opacity: 0.9, // 透明度
      },
      // 高亮状态下的多边形和标签样式
      emphasis: {
        // 每个多边形的样式
        itemStyle: {
          areaColor: 'red',
        },
        // 高亮状态下的标签样式
        label: {
          fontSize: '20px',
          color: 'black',
        },
      },
    },
    // 航线
    series: {
      type: 'lines',
      // 是否是多段线
      // polyline: true, 不能和curveness同时使用
      // 线特效的配置
      effect: {
        show: true,
        period: 6, // 特效时间
        // 特效图形 可以是图片路径/SVG路径
        symbol:
          'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z', //特效图形的标记
        symbolSize: 25, // 特效图形的大小
        trailLength: 0.01, // 特效尾迹长度[0,1]值越大，尾迹越长重
        loop: true, // 循环
        // roundTrip: true, //原路返回
        color: 'white', // 特效图形颜色
      },
      // 航线统一的样式设置
      lineStyle: {
        curveness: 0.3, // 尾迹线条曲直度
        color: 'aqua', // 线条颜色
        width: '2', // 线宽
      },
      // 线的数据的配置
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [87.617733, 43.792818], // 终点
          ],
        },
        {
          coords: [
            [87.617733, 43.792818], // 终点
            [116.405285, 39.904989], // 起点
          ],
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [102.712251, 25.040609], // 终点
          ],
        },
        {
          coords: [
            [102.712251, 25.040609], // 终点
            [116.405285, 39.904989], // 起点
          ],
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [91.132212, 29.660361], // 终点
          ],
        },
        {
          coords: [
            [113.665412, 34.757975], // 起点
            [126.642464, 45.756967], // 终点
          ],
        },
        {
          coords: [
            [126.642464, 45.756967], // 终点
            [113.665412, 34.757975], // 起点
          ],
        },
        {
          coords: [
            [113.665412, 34.757975], // 起点
            [120.153576, 30.287459], // 终点
          ],
        },
        {
          coords: [
            [113.665412, 34.757975], // 起点
            [121.509062, 25.044332], // 终点
          ],
        },
        {
          coords: [
            [121.509062, 25.044332], // 终点
            [113.665412, 34.757975], // 起点
          ],
        },
        {
          coords: [
            [113.665412, 34.757975], // 终点
            [110.33119, 20.031971], // 起点
          ],
        },
        {
          coords: [
            [110.33119, 20.031971], // 起点
            [113.665412, 34.757975], // 终点
          ],
        },
      ],
    },
    // 布局
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
  })
})
</script>

<style scoped lang="scss">
/* 为图表盒子设置宽高 8 */
.box {
  width: 100%;
  height: 100%;
}
</style>
